<template>
	<view class="box">
		<view class="topbox">
			<image src="../../static/头像.jpg" mode=""></image>
			<view class="rightbox">
				<view :class="index==current?'selectsmallbox' : 'smallbox'" v-for="(item,index) in navlist" :key="index"
					@click="navbtn(index)">
					<view class="name">
						{{item.name}}
					</view>
					<view class="nun">
						{{item.num}}
					</view>
				</view>
			</view>
		</view>
		<view class="hr"></view>
		<view class="" v-if="current==0">
			<view class="remarklist">
				<image src="../../static/头像.jpg" mode=""></image>
				<view class="rightbox">
					<view class="name">
						小葵
					</view>
					<view class="js">
						2020-12-11食品口味：枣夹核桃葡萄干500g*2袋
					</view>
					<view class="remark">
						太可爱了吧
					</view>
					<view class="imgbox">
						<image src="../../static/小葵.jpg" mode=""></image>
					</view>
				</view>
			</view>
			<view class="lastinfo">
				<text>浏览156次</text>
				<text>点赞25次</text>
			</view>
		</view>
		<view class="orderbox" v-if="current==1">
			<view class="order">
				订单号：1597854
			</view>
			<view class="hr"></view>
			<Baesorder style="margin-left:29rpx ;"></Baesorder>
			<view class="hr"></view>
			<view class="pj" @click="remark">
				评价
			</view>
		</view>
	</view>
</template>

<script>
	import Baesorder from "../../components/Baesorder/index.vue"
	export default {
		data() {
			return {
				navlist: [{
					name: "全部评论",
					num: "0"
				}, {
					name: "待评论",
					num: "0"
				}],
				current: 0
			}
		},
		methods: {
			navbtn(v) {
				this.current = v
			},
			// 评价
			remark(){
				this.jumpLink({link:"/pagesA/remark/index"})
			}
		},
		components: {
			Baesorder
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		background-color: #FFFFFF;
	}

	.topbox {
		display: flex;
		align-items: center;
		justify-content: space-around;

		image {
			width: 100rpx;
			height: 100rpx;
			border-radius: 100rpx;
		}

		.rightbox {
			display: flex;
			align-items: center;
			justify-content: space-around;
			width: 400rpx;

			.smallbox {
				text-align: center;

				.name {
					font-family: SourceHanSansCN-Regular;
					font-size: 30rpx;
					color: #333333;
					font-weight: 700;
				}

				.nun {
					font-family: SourceHanSansCN-Regular;
					font-size: 30rpx;
					color: #333333;
					margin-top: 21rpx;
					font-weight: 700;
				}
			}

			.selectsmallbox {
				text-align: center;
				color: #f7331f;

				.name {
					font-family: SourceHanSansCN-Regular;
					font-size: 30rpx;
					font-weight: 700;
				}

				.nun {
					font-family: SourceHanSansCN-Regular;
					font-size: 30rpx;
					margin-top: 21rpx;
					font-weight: 700;
				}
			}
		}
	}

	.hr {
		width: 100%;
		height: 2rpx;
		background-color: #f2f2f2;
		margin-top: 13rpx;
	}

	.remarklist {
		display: flex;
		border-bottom: 1rpx solid #f2f2f2;
		padding: 30rpx;
		box-sizing: border-box;

		image {
			width: 50rpx;
			height: 50rpx;
			border-radius: 50rpx;
		}

		.rightbox {
			margin-left: 30rpx;

			.name {
				font-family: SourceHanSansCN-Regular;
				font-size: 24rpx;
				color: #444444;
			}

			.js {
				font-family: SourceHanSansCN-Regular;
				font-size: 24rpx;
				color: #9f9f9f;
				margin-top: 15rpx;
			}

			.remark {
				font-family: SourceHanSansCN-Regular;
				font-size: 28rpx;
				color: #222222;
				margin-top: 15rpx;
			}

			.imgbox {
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				width: 600rpx;

				image {
					width: 165rpx;
					height: 165rpx;
					border-radius: 10rpx;
					margin-top: 41rpx;
					margin-right: 15rpx;
				}

				image:nth-child(3n) {
					margin-right: 0;
				}
			}
		}
	}

	.lastinfo {
		font-family: SourceHanSansCN-Regular;
		font-size: 24rpx;
		color: #9f9f9f;
		margin-left: 35rpx;
		margin-top: 20rpx;
		margin-bottom: 30rpx;
		padding-bottom: 10rpx;

		text {
			margin-right: 20rpx;
		}
	}

	.orderbox {
		margin-top: 30rpx;
		padding-bottom:30rpx ;
		box-sizing: border-box;

		.order {
			font-family: SourceHanSansCN-Regular;
			font-size: 24rpx;
			color: #666666;
			margin-left: 32rpx;
			margin-top: 10rpx;
			margin-bottom: 10rpx;
		}

		.pj {
			margin-left: 600rpx;
			width: 115rpx;
			height: 41rpx;
			border-radius: 20rpx;
			border: solid 1rpx #f7331f;
			line-height: 41rpx;
			text-align: center;
			margin-top: 20rpx;
			color: #f7331f;
			font-family: SourceHanSansCN-Regular;
			font-size: 24rpx;
		}
	}
</style>
